﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Kuopio</title>
    <link type="text/css" rel="Stylesheet" href="../css/cssreset.css" />
    <link type="text/css" rel="Stylesheet" href="../css/stylesheet.css" />
    <script type="text/javascript" src="kuopio.js"></script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/javascript.js"></script>
    <script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
</head>
<body>
    <div class="container">
        <div class="mainmenulink" onclick="window.location.href='../'">main menu</div>
        <nav class="tb">
            <div class="leftbutton" onclick="window.location.href='../hml'"></div>
            <div class="startDate"></div>
            <div class="tb_button" id="kpo_tb"></div>
            <div class="endDate"></div>
            <div class="rightbutton" onclick="window.location.href='../esp'"></div>
        </nav>
		<nav class="menubar">
            <div class="mb_left">
                <div class="mb_right">
                    <div class="mb_main">
                        <table cellpadding="0" cellspacing="0" width="90%">
                            <tr>
                                <td><div class="mb_tab mb_tab_selected"><p class="mb_text">details</p></div></td>
                                <td><div class="mb_tab"><p class="mb_text">stories</p></div></td>
                                <td><div class="mb_tab"><p class="mb_text">pictures</p></div></td>
                                <td><div class="mb_tab"><p class="mb_text">map</p></div></td>
                                <td><div class="mb_tab"><p class="mb_text">faq</p></div></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </nav>
        <div id="content_frame">
            <div class="content_container" id="details_container">
                <div class="content">
                    <div id="detailsMain">
                        <div id="topLeft"><p class="title" id="cityInfoTitle">City Info</p><p class="dataTop" id="cityInfo"></p></div>
                        <div id="topMiddle"><p id="nameFinnish"></p><p id="nameSwedish"></p></div>
                        <div id="topRight"><p class="title" id="linksTitle">Links</p><p class="dataTop" id="links"></p></div>
                        <div id="bottomLeft"><p class="title" id="missionaryInfoTitle">Missionary Info</p><p class="dataBottom" id="missionaryInfo"></p></div>
                        <div id="bottomMiddle"><p class="title" id="companionsTitle">Companions</p><p class="dataBottom" id="companions"></p></div>
                        <div id="bottomRight"><p class="title" id="churchInfoTitle">Church Info</p><p class="dataBottom" id="churchInfo"></p></div>
                    </div>
                </div>
            </div>
            <div class="content_container" id="stories_container">
                <div class="content">
                    <div id="storiesMain">
                        <div id="storyTitles"></div>
                        <div id="storyTextContainer">
                            <div id="storyText"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_container" id="pictures_container">
                <div class="content">
                    <div id="picturesMain">
                        <div id="thumbnailsWindow">
                            <table id="thumbnails" cellpadding="0" cellspacing="0">
                                <tr></tr>
                            </table>
                        </div>
                        <div id="imagesWindow">
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td><div id="imageArrowLeft"></div></td>
                                    <td><div id="imageContainers"></div></td>
                                    <td><div id="imageArrowRight"></div></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_container" id="map_container">
                <div class="content">
                    <div class="veMap" id="myMap"></div>
                </div>
            </div>
            <div class="content_container" id="faq_container">
                <div class="content">
                    <div id="faq">
                        <div class="faqTitle">Frequently Asked Questions</div>
                        <div class="faqs" id="faqs"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lbOverlay"></div>
    <div class="lbMain"><img class="lbImage" src="" /></div>
</body>
</html>